{% extends 'base_head.html' %}

{% block head %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/cart.css' %}">
    {% block title %}Корзина | Интернет магазин{% endblock %}
    {{ block.super }}  
{% endblock %}
{% block navbar %}
    {{ block.super }}     
{% endblock %}
{% block content %}
<div class="px-4 px-lg-0">
    <!-- For demo purpose -->
    <div class="container text-white py-5 text-center">
        <h1 class="display-4">Your Cart</h1>
    </div>
    <!-- End -->
    <div class="messages">
    {% if messages %}
        <ul class="messages text-danger">
            {% for message in messages %}    
            <li {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>    
            {% endfor %}
        </ul>
    {% endif %}
    </div>

    <div class="pb-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 p-5 bg-white rounded shadow-sm mb-5">
    
                    <!-- Shopping cart table -->
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col" class="border-0 bg-light">
                                        <div class="p-2 px-3 text-uppercase">Модель</div>
                                    </th>
                                    <th scope="col" class="border-0 bg-light">
                                        <div class="py-2 text-uppercase">Цена</div>
                                    </th>
                                    <th scope="col" class="border-0 bg-light">
                                        <div class="py-2 text-uppercase">Количество</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in cart_items %}
                                {% load cart_tags %}
                                    <tr>
                                        <th scope="row">
                                            <div class="p-2">
                                                <img src="{{ item.shoe.image.url }}" alt="" width="70" class="img-fluid rounded shadow-sm">
                                                <div class="ml-3 d-inline-block align-middle">
                                                    <h5 class="mb-0"> <a href="/shoe/{{item.shoe.id}}" class="text-dark d-inline-block align-middle">{{ item.shoe.brand }} {{ item.shoe.name  }} </a></h5><span class="text-muted font-weight-normal font-italic d-block">Size: {{ item.size }}</span>
                                                </div>
                                            </div>
                                        </th>
                                        <td class="align-middle"><strong>₽{{ item.shoe.price|floatformat:2|multiply:item.quantity }}</strong></td>
                                        <td class="align-middle">
                                            <div class="form-container">
                                            <form action='/update_quantity' method='post' class="form-update">
                                                {% csrf_token %}
                                                    <input type='hidden' name='item_id' value='{{item.id}}'>
                                                    <input class="input_quantity" type='text' name='new_quantity' size='2' value='{{item.quantity}}'>
                                                    <button class="btn btn-dark btn-sm">
                                                        <i class="fas fa-sync-alt"></i>
                                                    </button>
                                            </form>
                                            <form action="{% url 'remove_from_cart' item.id %}" method="post" style="display: inline;" class="form-delete">
                                                {% csrf_token %}
                                                <input type="hidden" name="item_id" value="{{item.id}}">
                                                <button type="submit" class="btn btn-danger btn-sm">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                            </div>
                                        </td>
                                        <!-- <td class="border-0 align-middle">

                                        </td> -->
                                            <!-- <a href="#" class="text-dark"><i class="fa fa-trash"></i></a></td> -->
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        <div class="bg-light rounded-pill px-4 py-3 text-uppercase font-weight-bold">Итог </div>
                        <ul class="list-unstyled mb-4">
                            <li class="d-flex justify-content-between px-4 py-3 border-bottom">
                                <strong class="text-muted">Предварительная сумма заказа: </strong><strong>₽{{cart.total}}</strong>
                            </li>
                            <li class="d-flex justify-content-between px-4 py-3 border-bottom">
                                <strong class="text-muted">Доставка: </strong><strong>Бесплатно</strong>
                            </li>
                            <li class="d-flex justify-content-between px-4 py-3 border-bottom">
                                <strong class="text-muted">Итого: </strong>
                                <h5 class="font-weight-bold">₽{{cart.total}}</h5>
                            </li>
                        </ul>
                        <a href="/checkout" class="btn btn-dark rounded-pill py-2 btn-block">Оформить</a>
                    </div>
                    <!-- End -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
